{extend name="v1/layout/base"}
{block name="content"}
<div class="layuimini-main">

  <fieldset class="table-search-fieldset xk-search-status" id="xk-search-status">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card-body layui-form layui-form-pane">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg12">
                <label class="layui-form-label">搜索关键词</label>
                <div class="layui-input-block">
                  <input type="text" name="keywords" placeholder="请输入搜索关键词" id="keywords" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg12">
                <label class="layui-form-label">更新时间</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" autocomplete="off" id="search_time" placeholder="请选择对应的下单时间范围">
                </div>
              </div>
            </div>
            <div class="layui-row">
              <div class="layui-col-xs4">&nbsp;</div>
              <div class="layui-col-xs4">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius close-search"><i class="layui-icon">&#x1007;</i>关闭</button>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius xk-dosearch">搜索<i class="layui-icon"></i></button>
              </div>
              <div class="layui-col-xs4">&nbsp;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>

  <script type="text/html" id="toolbar">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-black  layui-btn-sm" lay-event="reseve"><i class="layui-icon">&#xe63d;</i></button>
      <button class="layui-btn layui-btn-normal  layui-btn-sm" lay-event="add" data-title="产品一级分类添加" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Goods/goodsCateCreate/parent_id/{$parent_id}/level/{$level}"><i
          class="layui-icon">&#xe654;</i>添加分类</button>
    </div>
  </script>
  <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
  <script type="text/html" id="currentTableBar">
    <button class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" data-title="产品分类编辑" lay-event="edit" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Goods/goodsCateEdit"><i class="layui-icon">&#xe642;</i>编辑</button>
    <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="delete" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Goods/goodsCateDestroy"><i class="layui-icon">&#xe640;</i>删除</button>
  </script>
  <!-- 热门推荐 -->
  <script type="text/html" id="status">
    <input type="checkbox" lay-filter="status" value="{{d.goods_cate_id}}" name="status" lay-skin="switch" lay-text="启用|不启用" {{d.status==1?'checked':''}} />
  </script>
</div>
{/block}
{block name="myScript"}
<style media="screen">
  .layui-table-cell {
    height: 60px;
    line-height: 60px;
  }
</style>
<script>
  layui.use(['table', 'form', 'laydate'], function() {
    var $ = layui.jquery,
      table = layui.table,
      form = layui.form,
      laydate = layui.laydate;
    laydate.render({
      elem: '#search_time',
      range: '~',
      theme: '#1E9FFF',
      format: 'yyyy-MM-dd'
    });
    table.render({
      elem: '#currentTableId',
      url: '/{:config("manage.manage_name")}/{:config("manage.version")}/Goods/goodsCate',
      toolbar: '#toolbar',
      defaultToolbar: ['filter',{
        title: '搜索',
        layEvent: 'search',
        icon: 'layui-icon-search'
      }],
      height: 'full-50',
      cols: [
        [{
            field: 'goods_cate_id',
            width: '5%',
            title: 'ID',
            sort: true
          },
          {
            field: 'goods_cate_name',
            width: '20%',
            title: '分类名称',
            edit: 'text',
          },
          {
            field: 'order_id',
            width: '8%',
            title: '排序',
            edit: 'number'
          },
          {
            field: 'status',
            title: '是否启用',
            width: '8%',
            templet: "#status"
          },
          {
            field: 'update_time',
            title: '最后更新时间',
            width: '15%'
          },
          {
            title: '操作',
            toolbar: '#currentTableBar',
            minWidth: '150',
            fixed: 'right',
            align: "center"
          }
        ]
      ],
      limits: [100, 150, 200, 250, 500, 1000],
      limit: 100,
      id: 'table_ids',
      page: true,
      skin: 'line'
    });
    // 顶部操作工具
    table.on('toolbar(currentTableFilter)', function(obj) {
      var url = $(this).attr('data-url'),
        keywords = $("#keywords").val(),
        level = '{$level}',
        parent_id = '{$parent_id}',
        search_time = $("#search_time").val();
      switch (obj.event) {
        case 'reseve':
          table.reload('table_ids');
          break;
        case 'add':
          var index = layer.open({
            title: '产品分类添加',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              table.reload('table_ids', {
                where: {
                  keywords: keywords,
                  search_time: search_time,
                  parent_id: parent_id,
                  level: level
                }
              });
            }
          });
          break;
        case 'search':
          $("#xk-search-status").removeClass('xk-search-status');
          break;
        case 'back':
          var iframeIndex = parent.layer.getFrameIndex(window.name);
          window.parent.location.reload();
          parent.layer.close(iframeIndex);
          break;
      }
    })
    // 列表工具栏目
    table.on('tool(currentTableFilter)', function(obj) {
      var data = obj.data,
        event = obj.event,
        urlx = $(this).attr('data-url'),
        level = '{$level}',
        parent_id = '{$parent_id}',
        keywords = $("#keywords").val(),
        search_time = $("#search_time").val();
      url = urlx + '/parent_id/' + data.goods_cate_id + '/level/' + $(this).attr('data-level');
      switch (event) {
        case 'getshow':
          var index = layer.open({
            title: data.goods_cate_name + '下级分类',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              table.reload('table_ids', {
                where: {
                  keywords: keywords,
                  search_time: search_time,
                  parent_id: parent_id,
                  level: level
                }
              });
            }
          });
          break;
        case 'add':
          var index = layer.open({
            title: $(this).attr('data-title'),
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              table.reload('table_ids', {
                where: {
                  keywords: keywords,
                  search_time: search_time,
                  parent_id: parent_id,
                  level: level
                }
              });
            }
          });
          break;
        case 'edit':
          urlx = urlx + '/goods_cate_id/' + data.goods_cate_id;
          var index = layer.open({
            title: $(this).attr('data-title'),
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: urlx,
            cancel: function() {
              table.reload('table_ids', {
                where: {
                  keywords: keywords,
                  search_time: search_time,
                  parent_id: parent_id,
                  level: level
                }
              });
            }
          });
          break;
        case 'delete':
          //确定要删除吗？
          layer.msg('您确定要删除' + obj.data.goods_cate_name + '这个产品分类吗？', {
            time: 0, //不自动关闭
            btn: ['确定', '取消'],
            yes: function(index) {
              layer.close(index);
              https(urlx, {
                id_str: obj.data.goods_cate_id
              }, 'post', true, '正在执行删除操作').then(res => {
                if (res.result_code == 200) {
                  table.reload('table_ids', {
                    where: {
                      keywords: keywords,
                      search_time: search_time,
                      parent_id: parent_id,
                      level: level
                    }
                  });
                }
              })
            },
            btn2: function(index) {
              layer.close(index);
            }
          });
          break;

      }
    })
    form.on('switch(status)', function(obj) {
      if (obj.elem.checked == true) {
        var value = 1;
      } else {
        var value = 0;
      }
      var level = '{$level}',
        parent_id = '{$parent_id}',
        keywords = $("#keywords").val(),
        search_time = $("#search_time").val();
      // 动态修改 开始
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Goods/goodsCateChanageValue')}";
      https(url, {
        by_key: this.value,
        key: this.name,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          table.reload('table_ids', {
            where: {
              keywords: keywords,
              search_time: search_time,
              parent_id: parent_id,
              level: level
            }
          }, 'data');
        }
      })
    });
    form.on('switch(is_hot)', function(obj) {
      if (obj.elem.checked == true) {
        var value = 1;
      } else {
        var value = 0;
      }
      var level = '{$level}',
        parent_id = '{$parent_id}',
        keywords = $("#keywords").val(),
        search_time = $("#search_time").val();
      // 动态修改 开始
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Goods/goodsCateChanageValue')}";
      https(url, {
        by_key: this.value,
        key: this.name,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          table.reload('table_ids', {
            where: {
              keywords: keywords,
              search_time: search_time,
              parent_id: parent_id,
              level: level
            }
          }, 'data');
        }
      })
    });
    // 监听单元格编辑事件
    table.on('edit(currentTableFilter)', function(obj) {
      var value = obj.value,
        keywords = $('#keywords').val(),
        level = '{$level}',
        parent_id = '{$parent_id}',
        search_time = $("#search_time").val(),
        by_key = obj.data.goods_cate_id,
        key = obj.field;
      if (value == '') {
        table.reload('table_ids', {
          where: {
            keywords: keywords,
            search_time: search_time,
            parent_id: parent_id,
            level: level
          }
        }, 'data');
        return false;
      }
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Goods/goodsCateChanageValue')}";
      https(url, {
        by_key: by_key,
        key: key,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          table.reload('table_ids', {
            where: {
              keywords: keywords,
              search_time: search_time,
              parent_id: parent_id,
              level: level
            }
          }, 'data');
        }
      })
    });
    // 执行搜索
    $(".xk-dosearch").click(function() {
      var level = '{$level}',
        parent_id = '{$parent_id}',
        keywords = $("#keywords").val(),
        search_time = $("#search_time").val();
      table.reload('table_ids', {
        page: {
          curr: 1
        },
        where: {
          keywords: keywords,
          search_time: search_time,
          parent_id: parent_id,
          level: level
        }
      }, 'data');
    })
  });
</script>
{/block}
